<template>
  <view>
    <view class="u-p-24">
      <view class="ipts">
        <u-field v-model="name" label="姓名" placeholder="请填写姓名"></u-field>
        <u-field v-model="mobile" label="电话" placeholder="请填写电话"></u-field>
        <u-field v-model="id" label="身份证号" placeholder="请填写身份证号"></u-field>
      </view>

      <view class="block">
        <view class="title">身份证正面照</view>

        <view class="u-p-24 f-center">
          <u-upload max-count="1" @on-success="uploadSuccess" width="310" height="200" custom-btn>
            <image class="icon" src="../../static/icons/sfzz.png" mode="widthFix" slot="addBtn"></image>
          </u-upload>
        </view>
      </view>

      <view class="block">
        <view class="title">身份证背面照</view>

        <view class="u-p-24 f-center">
          <u-upload max-count="1" @on-success="uploadSuccess" width="310" height="200" custom-btn>
            <image class="icon" src="../../static/icons/sfzf.png" mode="widthFix" slot="addBtn"></image>
          </u-upload>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        mobile: '',
        id: ''
      };
    },
    methods: {
      uploadSuccess(e) {
        console.log(e)
      }
    }
  }
</script>

<style lang="scss">
  .ipts {
    background: #fff;
    margin-bottom: 24rpx;
    border-radius: 20rpx;
    padding: 24rpx;
  }
  
  .block {
    width: 702rpx;
    background: #fff;
    margin-bottom: 24rpx;
    border-radius: 20rpx;
    padding: 24rpx;

    .title {
      color: #000000;
      font-size: 26rpx;
    }

    .icon {
      width: 310rpx;
      height: 200rpx;
    }
  }
</style>
